<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:p="http://primefaces.prime.com.tr/ui"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:survey="http://java.sun.com/jsf/composite/components/question"
				template="/layout/template.xhtml">
	
	<ui:define name="head">
		<h:outputStylesheet library="stylesheets" name="field-validation.css"  />
	</ui:define>

	<ui:define name="body">
		
		<h:form id="creationForm">
			
			<h:panelGrid columns="1" styleClass="panel-text full-size">
				<p:panel header="Radio Question Creation Form">  
			
						<survey:question questionText="#{radioQuestionCreationView.newQuestion.text}"
										 questionLevel="#{radioQuestionCreationView.newQuestion.level}" />
						
						<h:panelGrid columns="2" style="text-align: left;">
							<h:outputLabel for="nullableAnswerRadio" value="Allow empty answers? (no option is selected)" />
							<h:selectBooleanCheckbox id="nullableAnswerRadio" value="#{radioQuestionCreationView.newQuestion.nullableAnswer}" />
						</h:panelGrid>
						
						<fieldset class="options">		
							<legend>Which are the options?</legend>
						
							<h:panelGrid columns="2" rowClasses="valign-top">	
								
								<h:dataTable id="questionChoices"
											 value="#{radioQuestionCreationView.newQuestion.options}"
											 var="option">
									<h:column>
										<h:graphicImage library="images" name="unselectedRadio.png" />
									</h:column>
									<h:column>					
										<h:inputText value="#{option.text}" size="55" class="options-textField">
											<f:ajax event="keyup" process="@this" />
										</h:inputText>
									</h:column>
								</h:dataTable>
								
								<h:column style="text-align: right;">			
									<h:commandButton value="+"
													 actionListener="#{radioQuestionCreationView.addNewOption}"
													 styleClass="options-btn-control">
										<f:ajax event="action" process="@this" render=":creationForm:questionChoices" />
									</h:commandButton>
									<h:commandButton value="-"
													 actionListener="#{radioQuestionCreationView.removeLastChoice}"
					                				 styleClass="options-btn-control">
					                	<f:ajax event="action" process="@this" render=":creationForm:questionChoices" />
									</h:commandButton>
								</h:column>
							</h:panelGrid>
	
						</fieldset>
						
				</p:panel>
				
		        <h:panelGrid columns="2" rowClasses="align-right" styleClass="full-size">
		        	<h:panelGroup>
						<p:commandButton value="Save" action="#{radioQuestionCreationView.createQuestion}" update="creationForm, notifications, statisticsPanel:statisticsPanel" />
						<p:commandButton action="home" value="Finish" immediate="true" ajax="false" />
					</h:panelGroup>
				</h:panelGrid>
			
			</h:panelGrid>
			
		</h:form>
	</ui:define>
</ui:composition>